<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
    <!-- 必须先引入vue，  后使用element-ui -->
    <script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
    <!-- 引入element 的组件库-->
    <script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

    <link rel="stylesheet" href="/admin/plugin/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
    <script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>

    <script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/mx1.0.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/mx1.0.1.js"></script>

    <style>
        .layui-form-label{
            width: 150px;
        }
        .layui-input-block{
            margin-left: 182px;
        }
    </style>
</head>
<body>

<form class="layui-form" action="" lay-filter="formData" style="margin: 10px 10px;" id="app">
    <fieldset>
        <legend>基本信息:</legend>
        <div class="layui-form-item">
            <label class="layui-form-label">栏目名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" required  lay-verify="required" placeholder="请输入栏目名称" autocomplete="off" class="layui-input">
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">菜单是否显示</label>
            <div class="layui-input-block">
                <select name="is_menu" lay-verify="required">
                    <option value="0">是</option>
                    <option value="1">否</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">是否创建表</label>
            <div class="layui-input-block">
                <select name="is_create" lay-verify="required">
                    <option value="0">否</option>
                    <option value="1">是</option>
                </select>
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label" >数据自定义接口</label>
            <div class="layui-input-block" style="display: flex;justify-content: space-between;">
                <input type="text" name="class_name" style="width: 89%;"   placeholder="请输入数据自定义接口" autocomplete="off" class="layui-input">
				<a class="layui-btn layui-btn-normal layui-btn-sm" style="height: 38px;line-height: 38px;" @click="fanyi" >自动翻译</a>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label" >service代码</label>
            <div class="layui-input-block">
                <el-button type="text" @click="getCode(1)">admin自定义接口</el-button>
                <el-button type="text" @click="getCode(2)">web自定义接口</el-button>
                <el-button type="text" @click="copyText(classCode)">复制代码</el-button><br/>
                <textarea type="text" id="service" v-model="classCode"  autocomplete="off" class="layui-input" style="height: 120px;"></textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label" >id</label>
            <div class="layui-input-block">
                <input type="text" name="id"   placeholder="空则自动生成" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label" >排序号</label>
            <div class="layui-input-block">
                <input type="text" name="pxh"   placeholder="请输入排序号" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label" >关联子表ID</label>
            <div class="layui-input-block">
                <input type="text" name="children_zygl_id"   placeholder="请输入关联子表ID" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" >主表关联字段</label>
            <div class="layui-input-block">
                <input type="text" name="main_re_col_name"   placeholder="请输入主表关联字段" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" >子表关联字段</label>
            <div class="layui-input-block">
                <input type="text" name="children_re_col_name"   placeholder="请输入子表关联字段" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label" >验证token</label>
            <div class="layui-input-block">
                <select name="token_vali" lay-verify="required">
                    <option value="0">验证</option>
                    <option value="1">不验证</option>
                </select>
            </div>
        </div>


    </fieldset>

    <fieldset>
        <legend>字段表信息:</legend>
        <div class="layui-form-item">
            <label class="layui-form-label">主键字段</label>
            <div class="layui-input-block">
                <input type="text" name="key_name"   placeholder="请输入主键字段" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">会员Id字段</label>
            <div class="layui-input-block">
                <input type="text" name="id_type"   placeholder="请输入会员Id字段" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">表名</label>
            <div class="layui-input-block">
                <input type="text" name="table_name"    placeholder="请输入表名" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">排序字段</label>
            <div class="layui-input-block">
                <input type="text" name="order_col"    placeholder="请输入排序字段" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">列表尾部是否合计</label>
            <div class="layui-input-block">
                <select name="show_summary" lay-verify="required">
                    <option value="0">否</option>
                    <option value="1">是</option>
                </select>
            </div>
        </div>
    </fieldset>



    <fieldset>
        <legend>录入窗口配置:</legend>
        <div class="layui-form-item">
            <label class="layui-form-label">录入窗口宽度</label>
            <div class="layui-input-block">
                <input type="text" name="input_width"    placeholder="录入窗口宽度" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">录入窗口高度</label>
            <div class="layui-input-block">
                <input type="text" name="input_height"    placeholder="录入窗口高度" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">录入页面字段分组配置</label>
            <div class="layui-input-block">
                <select name="input_id" lay-verify="required">
                    <option value=""></option>
                    <option :value="item.id" v-for="item in inputPages" >{{item.jmmc}}</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">自定义录入页面地址</label>
            <div class="layui-input-block">
                <input type="text" name="url"    placeholder="请输入自定义录入页面地址" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">自定义列表页面地址</label>
            <div class="layui-input-block">
                <input type="text" name="list_url"    placeholder="自定义列表页面地址" autocomplete="off" class="layui-input">
            </div>
        </div>

    </fieldset>








    <button class="layui-btn" lay-submit lay-filter="*" id="submitbutton" style="display: none;">立即提交</button>
</form>

<script>
    var form = null;


    var vm = new Vue({
        el:"#app",
        data:{
            inputPages:[],
            formData:{},
            classCode:"",
            parmsData:{},
        },
        created(){
            this.parmsData = getParams();
            this.init();
        },
        methods:{
            copyText(text) {
                var element = this.createElement(text);
                element.select();
                element.setSelectionRange(0, element.value.length);
                document.execCommand('copy');
                element.remove();
                top.alert("已复制到剪切板");
            },
            createElement(text) {
                var isRTL = document.documentElement.getAttribute('dir') === 'rtl';
                var element = document.createElement('textarea');
                // 防止在ios中产生缩放效果
                element.style.fontSize = '12pt';
                // 重置盒模型
                element.style.border = '0';
                element.style.padding = '0';
                element.style.margin = '0';
                // 将元素移到屏幕外
                element.style.position = 'absolute';
                element.style[isRTL ? 'right' : 'left'] = '-9999px';
                // 移动元素到页面底部
                let yPosition = window.pageYOffset || document.documentElement.scrollTop;
                element.style.top = `${yPosition}px`;
                //设置元素只读
                element.setAttribute('readonly', '');
                element.value = text;
                document.body.appendChild(element);
                return element;
            },
            async getCode(type){
                let data1 = form.val("formData");
                if(data1.name == ""){
                    top.alert("栏目名称不能为空!");
                    return;
                }
                const res = await postBody("/admin/api/FieldManagementController/getCodeGeneration",{name:data1.name,p_zygl_id:this.parmsData.p_zygl_id,type:type,zygl_id:data1.id});
                this.classCode = res.data.code;
                data1.class_name = res.data.class_name;
                form.val("formData", data1);
            },

            async fanyi(){
                let data1 = form.val("formData");
                if(data1.name == ""){
                    top.alert("栏目名称不能为空!");
                    return;
                }
                const res = await post("/admin/api/ColumnManagementController/oneClickTranslation",{"msg":data1.name});
                data1.class_name = res.data.rs;
                form.val("formData", data1);
                $("#service").val(res.data.code);
            },
            init(){
                post("/admin/api/ColumnManagementController/getInputPages",{},function (res){
                    console.log(res.data);
                    vm.inputPages = res.data;
                    vm.$nextTick(()=>{
                        vm.layuiInit();
                    })

                })
            },
            layuiInit(){
                //Demo
                layui.use('form', function(){
                    form = layui.form;
                    form.render("select");
                    form.val("formData", vm.formData);
                    //监听提交
                    form.on('submit(*)', function(data){
                        layer.msg(JSON.stringify(data.field));
                        return false;
                    });
                });
            }
        }
    })



    function getData() {
        var data1 = form.val("formData");
        return data1;
    }

    function setData(data) {
        //给表单赋值
        vm.formData = data;
        vm.init();
        // form.val("formData", data);
    }

</script>

</body>
</html>
